<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body {
        background-color: white;
    }
</style>

<body>
    <div style="width: 100px; height: 100px;" id="box">
        <input type="button" id="btn" value="变色" onclick="cbcolor()">
    </div>
    <script type="text/javascript">
        var box = document.getElementById('box');
        var btn = document.getElementById('btn');
        // var body = document.getElementsByTag('body');
        // var a = Math.random(); // 调用静态对象方法抛出随机数a
        // // console.log(a);

        // var b = a.toString(16); // 把a转换为16进制的字符串
        // // console.log(b);
        // // console.log(b.length); // 15
        // /* 进制的问题，为什么不是16（就像十进制为什么只有9而没有10） */

        // var c = b.substr(-6); // 截取字符串后六位
        // // console.log(c);


        // var color = '#' + Math.random().toString(16).substr(-6); // 加上'#'串联成一行代码
        // console.log(color);

        function getColor() {              //定义字符串变量colorValue存放可以构成十六进制颜色值的值
                         
            var colorValue = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";              //以","为分隔符，将colorValue字符串分割为字符数组["0","1",...,"f"]
                         
            var colorArray = colorValue.split(",");              
            var color = "#"; //定义一个存放十六进制颜色值的字符串变量，先将#存放进去
                           //使用for循环语句生成剩余的六位十六进制值
                          
            for (var i = 0; i < 6; i++) {                 //colorArray[Math.floor(Math.random()*16)]随机取出
                                 // 由16个元素组成的colorArray的某一个值，然后将其加在color中，
                                 //字符串相加后，得出的仍是字符串
                                
                color += colorArray[Math.floor(Math.random() * 16)];              
            }              
            return color;           
        }
        // console.log(getColor())
        clr = getColor()

        function cbcolor() {
            var body = document.getElementsByTagName('body');
            body[0].style.backgroundColor = clr;
        }
    </script>
</body>

</html>